<template>
	<view class="content">
		<h1 class="title">欢迎使用<br />宿舍管理系统</h1>
		<image class="logo" src="/static/logo.jpg" mode="aspectFill"></image>
		<view class="botton iconfont icon-jinrujiantouxiao" @click="login()"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			login() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url('../../public/animation.css');
	$status-bar: 0px;
	.content {
		background-color: #00aa7f;
		//flex布局垂直居中
		justify-content: center;
		&::before {
			display: block;
			content: '';
			height: $status-bar;
			width: 100%;
		}
		.title {
			color: #F9FFF9;
			font-size: 80rpx;
			text-align: center;
			animation: hide 1s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
		}
		.logo {
			margin-top: 80rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 20rpx 10rpx #a1d9a0;
			animation: hide 1s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
		}
		.botton {
			margin-top: 100rpx;
			height: 140rpx;
			width: 140rpx;
			color: #00aa7f;
			text-align: center;
			line-height: 140rpx;
			font-size: 120rpx;
			background-color: #F9FFF9;
			border-radius: 50%;
			animation-name: scaleDraw;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
			animation-duration: 2s;
		}
	}
</style>